<template>
  <div>
    <!-- <div class="searchHead">
      <div class="searchHead_left">
        <img src="@/assets/images/fdj.png" alt="" />
        <div>搜索结果</div>
      </div>
      <img
        class="close"
        @click="close"
        src="@/assets/images/guanbi.png"
        alt=""
      />
    </div> -->
    <div class="list">
      <div class="list_item" v-for="(item, index) in list" :key="index" @click="getShip(item)">
        {{ item.chineseName ? item.chineseName : item.name }}
      </div>
      <div v-if="list.length == 0">没有更多结果</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
import jingzhunImg from '@/assets/images/jingzhun.png';

// 全局 T 对象定义
declare const T: any;

// 定义类型
interface ShipData {
  lon: number;
  lat: number;
  chineseName?: string;
  name?: string;
  cog: number;
  [key: string]: any;
}

// 定义 props
const props = defineProps<{
  list: ShipData[];
  map: any;
}>();

// 状态
const marker = ref<HTMLElement | null>(null);
const onData = ref<ShipData>({} as ShipData);

// 方法
const getShip = (val: ShipData) => {
  onData.value = val;

  const lng = val.lon;
  const lat = val.lat;

  props.map.panTo(new T.LngLat(lng, lat));
  setImg();
};

const setImg = () => {
  if (marker.value && marker.value.parentNode) {
    const parent = marker.value.parentNode;
    parent.removeChild(marker.value);
  }
  
  const lng = onData.value.lon;
  const lat = onData.value.lat;
  const img = document.createElement("img");
  // 使用导入的图片资源
  img.src = jingzhunImg;
  
  const latlng = new T.LngLat(lng, lat);
  marker.value = document.createElement("div");
  img.style.width = "25px";
  img.style.height = "25px";
  img.style.transform = `rotate(${onData.value.cog}deg)`;
  marker.value.appendChild(img);
  marker.value.style.position = "absolute";
  
  props.map.getPanes().overlayPane.appendChild(marker.value);
  const pos = props.map.lngLatToLayerPoint(latlng);
  
  if (marker.value) {
    marker.value.style.top = pos.y - 8 + "px";
    marker.value.style.left = pos.x - 8 + "px";
    marker.value.style.zIndex = "1000";
  }
};

const closeSearch = () => {
  if (marker.value && marker.value.parentNode) {
    const parent = marker.value.parentNode;
    parent.removeChild(marker.value);
  }
  props.map.removeEventListener("zoomend", setImg);
};

// 生命周期钩子
onMounted(() => {
  props.map.addEventListener("zoomend", setImg);
  
  // 注意：这里的 eventBus 在 Vue 3 中需要替换为其他机制
  // 如 mitt 或 自定义的事件总线
  // 这里假设 eventBus 已被正确定义
  // eventBus.off("closeComponent");
  // eventBus.on("closeComponent", closeSearch);
});

onBeforeUnmount(() => {
  closeSearch();
  // eventBus.off("closeComponent");
});
</script>

<style scoped>
.list {
  height: 780px;
  overflow: auto;
}

.searchHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.searchHead_left {
  display: flex;
  align-items: center;
}

.searchHead_left>img {
  margin-right: 15px;
}

.searchHead img {
  width: 20px;
  height: 20px;
}

.close:hover {
  cursor: pointer;
}

.list_item {
  margin-bottom: 15px;
}

.list_item:hover {
  cursor: pointer;
  color: #457ae6;
}

::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #4376ec;
}
</style>